<template>
  <h2>审批考核补签</h2>
  <el-table :data="attendRsp" style="width: 100%">
    <el-table-column prop="date" label="日期" width="120" />
    <el-table-column prop="employeeName" label="姓名" width="120" />
    <el-table-column prop="status" label="判定" width="120" />
    <el-table-column label="上班时间" width="250">
      <template #default="{ row }">
        <el-time-picker v-model="row.checkInTime" placeholder="选择时间" format="HH:mm:ss" value-format="HH:mm:ss" />
      </template>
    </el-table-column>
    <el-table-column label="下班时间" width="250">
      <template #default="{ row }">
        <el-time-picker v-model="row.checkOutTime" placeholder="选择时间" format="HH:mm:ss" value-format="HH:mm:ss" />
      </template>
    </el-table-column>
    <el-table-column label="异常原因" width="250">
      <!-- <template #default="{ row }">
        <el-select v-model="row.reason" placeholder="选择原因" class="input_min_width">
          <el-option label="忘记打卡" value="1" />
          <el-option label="设备故障" value="2" />
          <el-option label="服务故障" value="3" />
          <el-option label="其他" value="4" />
        </el-select>
      </template> -->
      <el-input v-model="retroactiveReq.reason" placeholder="请输入原因" class="input_min_width" />
    </el-table-column>
    <el-table-column label="操作" width="120">
      <template #default="{ row }">
        <el-button type="primary" @click="handleRetroactive(row)">
          <el-icon>
            <Refresh />
          </el-icon>
          补签
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script name='Retrospective' setup lang='ts'>
import { ref } from 'vue';
import { useEmpStore } from '../store/emp';
import type { ApiResponse, AttendRsp, RetroactiveReq } from '../model';
import { getAttends, insertRetroactive } from '../api';
import { dayjs, ElMessage } from 'element-plus';
import moment from 'moment';

const pageSize = ref(5)
const pageNum = ref(1)
const total = ref(0)

let { empInfo } = useEmpStore();

let apiResponse = ref<ApiResponse<[]>>({
  code: 0,
  message: '',
  data: []
})

let attendRsp = ref<AttendRsp[]>([{
  id: empInfo!.id,
  employeeName: empInfo!.empname,
  department: '',
  date: '',
  checkInTime: '',
  checkOutTime: '',
  status: 0
}])

let retroactiveReq = ref<RetroactiveReq>({
  date: new Date(),
  checkInTime: new Date(),
  checkOutTime: new Date(),
  reason: ''
})



getAttends(pageNum.value, pageSize.value).then((res) => {
  if (res.code === 6000) {
    attendRsp.value = res.t.records;
    for (let i = 0; i < attendRsp.value.length; i++) {
      if (res.t.records[i].status === 1) {
        attendRsp.value[i].status = '迟到';
      } else if (res.t.records[i].status === 2) {
        attendRsp.value[i].status = '旷工';
      } else if (res.t.records[i].status === 3) {
        attendRsp.value[i].status = '早退';
      }
    }
    console.log(attendRsp.value);
  }
});



// 补签操作
const handleRetroactive = (row) => {
  console.log('补签数据:', row);
  // 这里可以发送请求到后端处理补签逻辑
  retroactiveReq.value.date = row.date;
  retroactiveReq.value.checkInTime = new Date(row.date + ' ' + row.checkInTime);
  retroactiveReq.value.checkOutTime = new Date(row.date + ' ' + row.checkOutTime);
  console.log(typeof retroactiveReq.value.date);
  console.log(typeof retroactiveReq.value.checkInTime);
  console.log(typeof retroactiveReq.value.checkOutTime);
  console.log('retroactiveReq.value:',retroactiveReq.value);
  insertRetroactive(retroactiveReq.value).then((res) => {
    console.log(res);
    if (res.code === 6000) {
      ElMessage.success('补签成功');
    }
    else {
      ElMessage.error('补签失败');
    }
  });
};


// import {
//   User,
//   Share,
//   Home,
//   Tag,
//   Check,
//   Clock,
//   Refresh,
// } from '@element-plus/icons-vue';
// import { useEmpStore } from '../store/emp';

// // 表格数据
// const attendanceData = ref([
//   {
//     date: '2022-07-05',
//     name: '张三',
//     status: '迟到',
//     startTime: '08:42:15',
//     endTime: '17:33:21',
//     reason: '1',
//   },
//   {
//     date: '2022-07-12',
//     name: '张三',
//     status: '旷工',
//     startTime: '08:42:15',
//     endTime: '',
//     reason: '1',
//   },
//   {
//     date: '2022-07-27',
//     name: '张三',
//     status: '早退',
//     startTime: '08:12:15',
//     endTime: '16:55:42',
//     reason: '1',
//   },
// ]);

// // 补签操作
// const handleRetroactive = (row) => {
//   console.log('补签数据:', row);
//   // 这里可以发送请求到后端处理补签逻辑
// };

</script>

<style scoped></style>
